<template>
  <el-form-item label="学校名称" prop="schoolId">
    <el-select
      @change="schoolChange"
      v-model.trim="selectData.schoolId"
      clearable
      placeholder="请选择学校"
      :disabled="schoolType"
      filterable
      class="!w-240px"
    >
      <el-option
        v-for="item in schoolList"
        :key="item.id"
        :label="item.schoolName"
        :value="item.id"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="机构名称" prop="collegeId">
    <el-select
      @change="changeCollege"
      v-model.trim="selectData.collegeId"
      clearable
      placeholder="请选择机构"
      :disabled="!selectData.schoolId || schoolType"
      filterable
      class="!w-240px"
    >
      <el-option
        v-for="item in collegeList"
        :key="item.id"
        :label="item.collegeName"
        :value="item.id"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="专业名称" prop="majorId">
    <el-select
      @change="changeMajor"
      v-model.trim="selectData.majorId"
      clearable
      placeholder="请选择专业"
      :disabled="!selectData.schoolId || schoolType"
      filterable
      class="!w-240px"
    >
      <el-option
        v-for="item in majorList"
        :key="item.id"
        :label="item.majorName"
        :value="item.id"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="班级名称" prop="classesId">
    <el-select
      v-model.trim="selectData.classesId"
      clearable
      @change="changeClasses"
      placeholder="请选择班级"
      :disabled="!selectData.schoolId || schoolType"
      filterable
      class="!w-240px"
    >
      <el-option
        v-for="item in classesList"
        :key="item.id"
        :label="item.classesName"
        :value="item.id"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="学生姓名" prop="studentId">
    <el-select
      ref="select"
      v-model="selectData.studentIds"
      multiple
      placeholder="请选择学生"
      @change="studentChange"
      :disabled="!selectData.classesId || schoolType"
      class="!w-240px"
    >
      <el-option
        v-for="item in studentList"
        :key="item.id"
        :label="item.studentName"
        :value="item.id"
        disabled
      >
        <el-checkbox
          @change="clickBox(item.id)"
          :value="checkList.includes(item.id)"
          :label="item.studentName"
        />
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="目标班级名称" prop="targetClassesId">
    <el-select
      v-model.trim="selectData.targetClassesId"
      clearable
      placeholder="请选择目标班级名称"
      :disabled="!selectData.classesId || schoolType"
      filterable
      class="!w-240px"
    >
      <el-option
        v-for="item in targetClassesList"
        :key="item.id"
        :label="item.classesName"
        :value="item.id"
      />
    </el-select>
  </el-form-item>
</template>
<script setup lang="ts">
import * as SchoolApi from '@/api/cmis/school'
import * as CollegeApi from '@/api/cmis/college'
import * as MajorApi from '@/api/cmis/major'
import * as ClassesApi from '@/api/cmis/classes'
import * as StudentApi from '@/api/cmis/student'
const props = defineProps({
  useType: Boolean,
  schoolType: Boolean
})

const schoolList = ref([]) //学校列表
const collegeList = ref([]) //机构列表
const majorList = ref([]) //专业列表
const classesList = ref([]) //机构列表
const studentList = ref([]) //学生列表
const targetClassesList = ref([]) // 目标班级列表
const schoolType = ref(props.schoolType ? props.schoolType : false) // 机构下拉框状态
const checkList = ref([])

const selectData = ref({
  schoolId: undefined,
  collegeId: undefined,
  majorId: undefined,
  classesId: undefined,
  studentIds: undefined,
  targetClassesId: undefined //目标班级
})

/** 初始化 **/
onMounted(() => {
  getSchoolLists()
  getCollegeLists()
  getMajorList()
  getClassesLists()
  // getStudentLists()
})

// 接收编辑时回显的参数
const getAllList = (editValue: any) => {
  selectData.value = {
    schoolId: editValue.schoolId,
    collegeId: editValue.collegeId,
    majorId: editValue.majorId,
    classesId: editValue.classesId,
    studentIds: editValue.studentIds,
    targetClassesId: editValue.targetClassesId
  }
}

// 获取学校列表
const getSchoolLists = async () => {
  const res = await SchoolApi.getSchoolList(selectData.value)
  schoolList.value = res
}

// 获取机构列表
const getCollegeLists = async () => {
  const res = await CollegeApi.getCollegeList(selectData.value)
  collegeList.value = res
}

// 获取专业列表
const getMajorList = async () => {
  const res = await MajorApi.getMajorList({
    schoolId: selectData.value.schoolId,
    collegeId: selectData.value.collegeId
  })
  majorList.value = res
}

// 获取班级列表
const getClassesLists = async () => {
  const res = await ClassesApi.getClassesList(selectData.value)
  classesList.value = res
  targetClassesList.value = res
}

// 获取学生列表
const getStudentLists = async () => {
  const res = await StudentApi.getStudentList(selectData.value)
  studentList.value = res
}
//获取目标班级
// const getTargetClassesList = async () => {
//   if (classesList.value.length > 0) {
//     targetClassesList.value = classesList.value.filter((it) => it.id !== selectData.value.classesId)
//   }
// }

// 选择学校
const schoolChange = async (value: any) => {
  selectData.value.collegeId = undefined
  selectData.value.majorId = undefined
  selectData.value.classesId = undefined
  if (value) {
    // 加载机构列表
    getCollegeLists()
    // 加载专业列表
    getMajorList()
    // 加载班级列表
    getClassesLists()
  }
}

// 选择机构
const changeCollege = async () => {
  selectData.value.majorId = undefined
  selectData.value.classesId = undefined
  // 加载专业列表
  getMajorList()
  // 加载班级列表
  getClassesLists()
}

// 选择专业
const changeMajor = async () => {
  selectData.value.classesId = undefined
  // 加载班级列表
  getClassesLists()
}

const emit = defineEmits(['SchoolRegister'])
//选择班级
const changeClasses = (id) => {
  clearCheck()
  const classesInfo = classesList.value.find((it) => it.id === id)
  const data = {
    grade: classesInfo?.grade
  }
  if (id) {
    // 加载学生列表
    getStudentLists()
    // getTargetClassesList()
  }
  // console.log(data, '什么什么这里')

  emit('SchoolRegister', data)
}
//选择学生
const studentChange = (val) => {
  checkList.value = val
}
function clickBox(val) {
  if (checkList.value.includes(val)) {
    checkList.value.splice(checkList.value.indexOf(val), 1)
  } else {
    checkList.value.push(val)
  }
  selectData.value.studentIds = checkList.value
}

//清除选中
const clearCheck = () => {
  selectData.value.studentIds = []
  checkList.value = []
}
// 清空选项
const resetFormData = () => {
  selectData.value = {
    schoolId: undefined,
    collegeId: undefined,
    majorId: undefined,
    classesId: undefined,
    studentIds: undefined,
    targetClassesId: undefined
  }
}

// 暴露方法和属性给父组件
defineExpose({ selectData, resetFormData, getAllList })
</script>
